<script setup>
// 引入 api
import { ref } from "vue"

// 列表
const list = ref([])

// 新的值
const newValue = ref('')

// 点击函数
function btn() {
    if (newValue.value !== '') {
        list.value.push(newValue.value)
    } else {
        alert("请输入内容")
    }
}
</script>

<template>
    <!-- 按钮 -->
    <input type="text" placeholder="请输入内容" v-model="newValue">
    <input type="button" value="添加到列表" @click="btn">

    <!-- 渲染 -->
    <ul v-if="list.length !== 0">
        <li v-for="item in list">{{ item }}</li>
    </ul>

    <ul v-else>
        列表为空
    </ul>


</template>